<template>
	<div class="profile-container">
		<!-- 顶部个人信息区域 -->
		<div class="profile-header">
			<div class="avatar-container">
				<img class="avatar" :src="userInfo.avatar || defaultAvatar" alt="头像" />
			</div>
			<div class="user-info">
				<div class="username">{{ userInfo.name }}</div>
				<div class="phone">{{ formatPhone(userInfo.phone) }}</div>
			</div>
		</div>

		<!-- 功能列表 -->
		<div class="profile-menu">
			<div class="menu-item" @click="modifyPassword">
				<div class="menu-item-left">
					<i class="menu-icon lock-icon iconfont icon-mima"></i>
					<span class="menu-text">修改密码</span>
				</div>
				<i class="iconfont icon-arrow"></i>
			</div>

			<div class="menu-item" @click="changePhone">
				<div class="menu-item-left">
					<i class="menu-icon phone-icon iconfont icon-shouji"></i>
					<span class="menu-text">更换手机号</span>
				</div>
				<i class="iconfont icon-arrow"></i>
			</div>
		</div>

		<!-- 退出登录按钮 - 已调整位置到底部 -->
		<div class="logout-btn-container">
			<div class="logout-btn" @click="logout">
				退出登录
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'ProfilePage',
		data() {
			return {
				activeTab: 'profile',
				defaultAvatar: require('@/static/img/userAvatar.png'), // 请替换为实际的默认头像路径
				userInfo: {
					name: '',
					phone: '',
					avatar: '' // 如果有头像地址，可以在这里设置
				}
			}
		},
		onLoad() {
			// 加载用户信息
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				// 从本地存储获取渠道信息
				const channelInfo = uni.getStorageSync('channelInfo');

				if (channelInfo) {
					this.userInfo.name = channelInfo.name || '智慧渠道';
					this.userInfo.phone = channelInfo.mobile || '13800000000';
				} else {
					// 如果本地没有，则通过API获取
					this.$request.info({}, (res) => {
						this.userInfo.name = res.name || '智慧渠道';
						this.userInfo.phone = res.mobile || '';
						// 保存到本地存储
						uni.setStorageSync('channelInfo', {
							name: this.userInfo.name,
							mobile: this.userInfo.phone
						});
					});
				}
			},
			formatPhone(phone) {
				if (!phone) return '';
				// 将电话号码中间部分用星号替换
				return phone.substr(0, 3) + '****' + phone.substr(7);
			},
			modifyPassword() {
				// 跳转到修改密码页面
				uni.navigateTo({
					url: '/pages/user/password'
				});
			},
			changePhone() {
				// 跳转到更换手机号页面
				uni.navigateTo({
					url: '/pages/user/phone'
				});
			},
			logout() {
				// 显示确认框
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用退出登录接口
							this.$request.logout({}, (res) => {}, (err) => {}, () => {
								// 无论成功失败都清除本地登录信息
								uni.clearStorageSync();

								// 跳转到登录页面
								uni.reLaunch({
									url: '/pages/login'
								});
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/scss/variables.scss";
	.profile-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f7f8fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	/* 顶部个人信息区域样式 */
	.profile-header {
		display: flex;
		align-items: center;
		padding: 30px 20px;
		background-color: $colorPrimary;
		color: #fff;
	}

	.avatar-container {
		margin-right: 15px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.6);
	}

	.user-info {
		flex: 1;
	}

	.username {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.phone {
		font-size: 14px;
		opacity: 0.9;
	}

	/* 功能菜单样式 */
	.profile-menu {
		background-color: #fff;
		margin-top: 15px;
		border-radius: 8px;
		overflow: hidden;
		margin-left: 15px;
		margin-right: 15px;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item-left {
		display: flex;
		align-items: center;
	}

	.menu-icon {
		width: 24px;
		height: 24px;
		margin-right: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lock-icon {
		color: $colorPrimary;
	}

	.phone-icon {
		color: $colorPrimary;
	}

	.menu-text {
		font-size: 15px;
		color: #333;
	}

	.arrow-icon {
		color: #ccc;
		font-size: 18px;
	}

	/* 退出登录按钮样式 - 已调整 */
	.logout-btn-container {
		flex: 1;
		display: flex;
		align-items: flex-end;
		padding-bottom: 40px;
		margin-top: 30px;
	}

	.logout-btn {
		margin: 0 15px;
		padding: 15px 0;
		width: calc(100% - 30px);
		text-align: center;
		background-color: #fff;
		color: #ff3b30;
		font-size: 16px;
		border-radius: 8px;
		font-weight: 500;
	}

	.logout-btn:active {
		background-color: #f5f5f5;
	}
	
	.icon-arrow {
		font-size: 26rpx !important;
		color: #bbb !important;
	}
</style>